<template>
    <div>
        <el-table :data="data">
            <el-table-column type="expand">
                <template slot-scope="props">
                    <el-table :data="props.row.children">
                        <el-table-column label="项目名称" prop="name"></el-table-column>
                        <el-table-column label="项目编号" prop="id"></el-table-column>
                    </el-table>
                </template>
            </el-table-column>
            <el-table-column label="群名称" prop="name" width="120"></el-table-column>
            <el-table-column label="群编号" prop="id"></el-table-column>
            <el-table-column label="操作" width="200">
                <template slot-scope="scope">
                    <el-button size="mini" @click="editGroup(scope.row.id)">
                        <i class="el-icon-edit"></i>编辑
                    </el-button>
                    <el-button size="mini" @click="exitGroup(scope.row.id)">
                        <i class="el-icon-circle-close text-danger"></i>退出
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <edit-dialog :gid="id" :is_edit_join_group.sync="is_edit_join_group" :check_list="check_list"></edit-dialog>
    </div>
</template>

<script>
import group from "@/api/group.js";
import editDialog from "./edit_dialog.vue";

export default {
    name: "join-group-table",
    props: ["data"],
    components: {
        editDialog
    },
    data() {
        return {
            is_edit_join_group: false,
            check_list: undefined,
            id: undefined
        };
    },
    methods: {
        exitGroup(id) {
            this.$confirm("确认退出?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            })
                .then(() => {
                    group
                        .exitGroup({ id: id })
                        .then(res => {
                            this.$message({
                                type: "success",
                                message: "退出成功!"
                            });
                        })
                        .catch(err => {
                            this.$message.error(err);
                        });
                    this.$store.dispatch("group/getJoinGroupList");
                })
                .catch(() => {
                    this.$message({
                        type: "info",
                        message: "已取消退出"
                    });
                });
        },
        editGroup(id) {
            this.is_edit_join_group = true;
            this.id = id;
            group
                .getMyJoinGroupInfo({ gid: id })
                .then(res => {
                    this.check_list = res;
                })
                .catch(err => {
                    this.$message.error(err);
                });
        }
    }
};
</script>

<style>
</style>
